<template>
  <h2>业务1：鼠标坐标</h2>
  <h3>{{ mouse }}</h3>
  <hr />
  <h2>业务2：点击累加</h2>
  <h3>{{ number }}</h3>
  <button @click="btn()">点击累加</button>
</template>

<script>
import { reactive, ref } from 'vue'

// 业务1：鼠标坐标
const useMouse = () => {
  // 定义响应式对象
  const mouse = reactive({ x: 0, y: 0 })
  // 给文档绑定鼠标移动事件
  document.addEventListener('mousemove', event => {
    // console.log(event)
    // 获取鼠标坐标值
    const { pageX, pageY } = event
    // 赋值给响应式对象
    mouse.x = pageX
    mouse.y = pageY
  })
  // 返回响应式对象用于页面绑定
  return { mouse }
}

// 业务2：点击累加- 上午的业务直接复制过来使用即可
const useCount = () => {
  // 通常是用来定义普通类型数据，字符串，数字，布尔，null，undefined
  const number = ref(10000)
  // console.log(number) // Ref 响应式对象
  // console.log(number.value) // 需要通过 .value 获取真正的值
  const btn = (val = 1000) => {
    number.value += val
  }
  return { btn, number }
}

export default {
  setup() {
    // // 业务1：鼠标坐标封装
    // const { mouse } = useMouse()
    // // 业务2：点击累加
    // const { number, btn } = useCount()
    // // 返回给模板使用
    // return { mouse, number, btn }

    // 一步到位书写
    return { ...useMouse(), ...useCount() }
  },
}
</script>

<style></style>
